<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/util/mixins-resize";

export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
    };
  },
  props: {
    id: {
      type: String,
      default: "chart",
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    clearInterval(this.faultByHourTime);
  },
  methods: {
    initChart(param) {
      const c = echarts.init(document.getElementById(this.id));
      this.chart = c;
      this.chart.setOption(this.setOptions(param));
    },
    setOptions(param) {
      let option = {
        // 鼠标hover出现的提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型:axis是鼠标hover到一条柱状图显示全部数据;item是鼠标hover到折线点显示相应数据
          type: 'line', // 默认为line;line鼠标移上去为竖直线;cross鼠标移上去显示十字线;shadow鼠标移上去显示灰色方框
          // 坐标轴指示器
          axisPointer: {
            lineStyle: {
              color: 'rgba(75,112,247, 1)',
            },
          },
          backgroundColor: 'rgba(75,112,247,0.4)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        // 图例
        legend: {
          // icon: 'line', 
          data: [{
            icon: 'image://'+require('@/assets/sprites/homepage.configuration.example/line1.png'),
            name: '报告二维码数量'
          }, {
            icon: 'image://'+require('@/assets/sprites/homepage.configuration.example/line2.png'),
            name: '样品二维码数量'
          }],
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 24, // 间隔
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#4E5969',
          },
        },
        // 图表位置
        grid: {
          left: '2%',
          right: '4%',
          top: '15%',
          bottom: '0%',
          containLabel: true, // 是否包含坐标刻度
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false, // 散点图的留白策略
            axisLine: {
              lineStyle: {
                color: '#B9B9B9',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              color: '#59697A',
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
            data: param['x'],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#B9B9B9',
              },
            },
            axisLabel: {
              //  改变y轴字体颜色和大小
              // formatter: '{value}间 ', //  给y轴添加单位
              color: '#59697A',
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                color: '#B9B9B9',
                type: 'dashed',
              },
            },
          },
        ],
        series: [
          {
            name: '报告二维码数量',
            type: 'line',
            smooth: true, // 是否为平滑曲线
            lineStyle: {
              width: 1,
            },
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false, // 是否显示数据点
            areaStyle: {
              // 设置渐变色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(25,97,236,0.4)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(25,97,236,0.1)',
                  },
                ],
                false
              ),
            },
            itemStyle: {
              color: '#1961EC',
              borderWidth: 1,
            },
            // data: [18, 20, 32, 15, 26, 36, 22, 15, 21],
            data: param['y1'],
          },
          {
            name: '样品二维码数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              width: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255,198,74,0.4)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(255,198,74,0.1)',
                  },
                ],
                false
              ),
            },
            itemStyle: {
              color: '#FFC64A',
              borderWidth: 1,
            },
            // data: [32, 25, 18, 36, 22, 15, 28, 34, 28],
            data: param['y2'],
          },
        ],
      };
      return option;
    },
  },
};
</script>
